<template>
  <view class="content">
    <view class="row b-b">
      <text class="tit">姓名</text>
      <input class="input" type="text" v-model="addressData.name" placeholder="收货人姓名"
             placeholder-class="placeholder"/>
    </view>
    <view class="row b-b">
      <text class="tit">手机号码</text>
      <input class="input" type="number" v-model="addressData.phoneNumber" placeholder="收货人手机号码"
             placeholder-class="placeholder"/>
    </view>
    <view class="row b-b">
      <text class="tit">邮政编码</text>
      <input class="input" type="number" v-model="addressData.postCode" placeholder="收货人邮政编码"
             placeholder-class="placeholder"/>
    </view>
<!--        <view class="row b-b">-->
<!--          <text class="tit">所在区域</text>-->
<!--          <text @click="chooseLocation" class="input">-->
<!--            {{ addressData.province }} {{ addressData.city }} {{ addressData.region }}-->
<!--          </text>-->
<!--          <text class="yticon icon-shouhuodizhi" @click="chooseLocation"></text>-->
<!--        </view>-->
<!--      &lt;!&ndash;-->
    <view class="row b-b">
      <text class="tit">所在区域</text>
      <input class="input" type="text" v-model="addressData.prefixAddress" placeholder="所在区域" placeholder-class="placeholder" />
    </view>

<!--    <view class="row b-b">-->
<!--      <text class="tit">所在区域</text>-->
<!--      <el-cascader-->
<!--          v-model="value"-->
<!--          :options="localData"-->
<!--          :props="{'value':'dictCode','label':'dictLabel'}"-->
<!--          clearable></el-cascader>-->
<!--    </view>-->
    <view class="row b-b">
      <text class="tit">详细地址</text>
      <input class="input" type="text" v-model="addressData.detailAddress" placeholder="详细地址"
             placeholder-class="placeholder"/>
    </view>
    <view class="row b-b">
      <text class="tit">智能识别</text>
      <input class="input" type="text" v-model="address" placeholder="地址一键粘贴即可识别"
             placeholder-class="placeholder"/>
      <button type="default" @click="parseAddress">智能识别地址</button>
    </view>
    <view class="row default-row">
      <text class="tit">设为默认</text>
      <switch :checked="addressData.defaultStatus==1" color="#fa436a" @change="switchChange"/>
    </view>
    <button class="add-btn" @click="confirm">提交</button>
  </view>
</template>

<script>
import {
  addAddress,
  updateAddress,
  fetchAddressDetail, toParseAddress, getAddressList
} from '@/api/medicine/address.js';
import uniDataPicker from '@/uni_modules/uni-data-picker/components/uni-data-picker/keypress.js';

export default {
  components: {
    'uni-data-picker': uniDataPicker
  },
  data() {
    return {
      addressData: {
        name: '',
        phoneNumber: '',
        postCode: '',
        detailAddress: '',
        default: false,
        province: '',
        city: '',
        region: '',
        prefixAddress: '',
      },
      address: [],
      localData: [],
      // value: [],

      // fields: ['dictLabel','dictCode','children'],
      // area: []
    }

  },
  onLoad(option) {
    // this.addressListOption();
    let title = '新增收货地址';
    if (option.type === 'edit') {
      title = '编辑收货地址'
      fetchAddressDetail(option.id).then(response => {
        this.addressData = response.data;
        this.addressData.prefixAddress = this.addressData.province + this.addressData.city + this.addressData.region;
      });
    }
    this.manageType = option.type;
    // this.initData();
    uni.setNavigationBarTitle({
      title
    })
  },
  methods: {
    // onchangetypeId(event) {
    //   // 当选择器改变时触发此方法
    //   console.log('类型ID改变', event);
    //   // 处理选中的类型ID
    // },
    onchange(e) {
      const value = e.value
    },
    onnodeclick(node) {
      console.log("被点击了")
    },
    // addressListOption() {
    //   console.log("ADDRESS ---")
    //   getAddressList().then(res => {
    //     console.log("ADDRESS111" + res.data)
    //     this.localData = res.data
    //   })
    // },
    // bindPickerChange( ) {
    //   let area = this.localData.detail.value
    //   this.area = [area[0].text,area[1].text,area[2].text];
    //   this.address.province = area[0].value;
    //   this.address.city = area[1].value;
    //   this.address.county = area[2].value;
    // },
    parseAddress() {
      console.log(this.address)
      toParseAddress(this.address).then(response => {
        console.log(response.data);
        this.addressData = response.data;
        this.addressData.prefixAddress = this.addressData.province + this.addressData.city + this.addressData.region;
      })
    },
    switchChange(e) {
      this.addressData.defaultStatus = e.detail.value ? 1 : 0;
    },
    //地图选择地址
    chooseLocation() {
      uni.chooseLocation({
        success: (data) => {
          this.covertAdderss(data.address);
          this.addressData.detailAddress = data.name;
        }
      })
    },
    //将地址转化为省市区
    covertAdderss(address) {
      console.log("covertAdderss", address);
      if (address.indexOf("省") != -1) {
        this.addressData.province = address.substr(0, address.indexOf("省") + 1);
        address = address.replace(this.addressData.province, "");
        this.addressData.city = address.substr(0, address.indexOf("市") + 1);
        address = address.replace(this.addressData.city, "");
        this.addressData.region = address.substr(0, address.indexOf("区") + 1);
      } else {
        this.addressData.province = address.substr(0, address.indexOf("市") + 1);
        address = address.replace(this.addressData.province, "");
        this.addressData.city = "";
        this.addressData.region = address.substr(0, address.indexOf("区") + 1);
      }
    },
    //提交
    confirm() {
      let data = this.addressData;
      if (!data.name) {
        this.$api.msg('请填写收货人姓名');
        return;
      }
      if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.phoneNumber)) {
        this.$api.msg('请输入正确的手机号码');
        return;
      }
      // if (!data.prefixAddress) {
      //   this.$api.msg('请输入区域');
      //   return;
      // }
      // this.covertAdderss(data.prefixAddress);
      // if (!data.province) {
      //   this.$api.msg('请输入正确的省份');
      //   return;
      // }
      if (!data.detailAddress) {
        this.$api.msg('请填写详细地址信息');
        return;
      }
      if (this.manageType == 'edit') {
        updateAddress(this.addressData).then(response => {
          //this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
          this.$api.prePage().refreshList(data, this.manageType);
          this.$api.msg("地址修改成功！");
          setTimeout(() => {
            uni.navigateBack()
          }, 800)
        });
      } else {
        addAddress(this.addressData).then(response => {
          //this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
          this.$api.prePage().refreshList(data, this.manageType);
          this.$api.msg("地址添加成功！");
          setTimeout(() => {
            uni.navigateBack()
          }, 800)
        }).catch(error => {
          console.log(error.data.msg)
          uni.showToast({
            title: error.data.msg,
            duration: 2000
          })
        })
      }
    },
  }
}
</script>

<style lang="scss">
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.picker-block {
  margin-bottom: 20px;
}

page {
  background: $page-color-base;
  padding-top: 16upx;
}

.row {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 30upx;
  height: 110upx;
  background: #fff;

  .tit {
    flex-shrink: 0;
    width: 150upx;
    font-size: 30upx;
    color: $font-color-dark;
  }

  .input {
    flex: 1;
    font-size: 30upx;
    color: $font-color-dark;
  }

  .icon-shouhuodizhi {
    font-size: 36upx;
    color: $font-color-light;
  }
}

.default-row {
  margin-top: 16upx;

  .tit {
    flex: 1;
  }

  switch {
    transform: translateX(16upx) scale(.9);
  }
}

.add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 690upx;
  height: 80upx;
  margin: 60upx auto;
  font-size: $font-lg;
  color: #fff;
  background-color: $base-color;
  border-radius: 10upx;
  box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
</style>
